<!DOCTYPE html>
<html lang="en">
<head>
    <title>H5触屏版tab组件</title>
    <meta name="viewport" charset="utf-8" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0">
    <link rel="stylesheet" href="index.css">
  <style>
    h3 {
      text-align: center;
      font-family: Microsoft YaHei,Arial;
      color: #fff;
      font-size: 1.7em;
      font-weight: normal;
      padding: 1em 0;
      margin: 0;
    }

    .content {
      margin-top: 40px;
      width: 100%;
      text-align: center;
      font-size: 36px;
    }

    .prev {
      float: left;
      margin-left: 20px;
    }

    .next {
      float: right;
      margin-right: 20px;
    }
  </style>
</head>
<body >

  <div class="carousel" ontouchstart="" >
    <div class="item" style="background: #3b76c0" >
      <h3 >item-1</h3>
    </div>
    <div class="item" style="background: #58c03b;">
      <h3>item-2</h3>
    </div>
    <div class="item" style="background: #c03b25;">
      <h3>item-3</h3>
    </div>
    <div class="item" style="background: #e0a718;">
      <h3>item-4</h3>
    </div>
    <div class="item" style="background: #c03eac;">
      <h3>item-5</h3>
    </div>
  </div>


  <div class="page-number">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="option">
    <div class="prev"><button class="btn-prev">prev</button></div>
    <div class="next"><button class="btn-next">next</button></div>
  </div>

  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem commodi consequatur doloribus est fugiat illum magni nihil obcaecati odio, officia perferendis praesentium quam quas quia quo ratione totam ullam?</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem commodi consequatur doloribus est fugiat illum magni nihil obcaecati odio, officia perferendis praesentium quam quas quia quo ratione totam ullam?</div>

  <script src="lib/LinkList.js"></script>
  <script src="lib/carousel.js"></script>
  <script>

    var carousel = CreateCarousel("carousel", "item", true)
            .bindTouchEvent()
            .setItemChangedHandler(onPageChanged);

    var btnPrev = document.querySelector(".btn-prev");
    btnPrev.addEventListener("click",function () {
      carousel.prev();
    });

    var btnPrev = document.querySelector(".btn-next");
    btnPrev.addEventListener("click",function () {
      carousel.next();
    });

    var dots = document.querySelectorAll(".page-number div");
    var curDot = dots[0];
    curDot.className = "active";
    function onPageChanged(preIndex, curIndex) {
      curDot.className = "";
      curDot = dots[curIndex];
      curDot.className = "active";
    }
  </script>
</body>
</html>